const {
  resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const {
//   VueLoaderPlugin
// } = require('vue-loader');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const autoprefixer = require('autoprefixer');

//node环境下commonjs规范：
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  //配置外部文件
  externals: {
    'vue': 'Vue'
  },
  devtool: 'source-map',
  resolveLoader: {
    //通过这个配置找到tpl-loader依赖目录
    //合并node_modules和自己定义的tpl-loade目录
    modules: [
      'node_modules',
      resolve(__dirname, './loaders')
    ]
  },
  module: {
    rules: [{
        test: /\.tpl$/,
        loader: 'tpl-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }, {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer({
                    overrideBrowserslist: [
                      "> 1%",
                      "last 2 versions"
                    ]
                  })
                ]
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html')
    })
  ]
}